<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset=UTF-8">
        <title>CID SECURE</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">


        <link rel="stylesheet" type="text/css" href="../css/estilos.css"/>
        <!--        <link rel="stylesheet" type="text/css" href="css/demo.css"/>-->
        <!--estilos de la galeria        -->

        <script>
            $(document).ready(function(){
               
                $('#tweets').jQTwitter({
                    username: 'CIDsecureLoja',
                    count: 10,
                    show_image: true
                                    
                });
            });
        </script>
        <!--      javascript proporciones de la pantalla  -->
        <script>
            function updateBackground() {
                screenWidth = $(window).width();
                screenHeight = $(window).height();
                var bg = jQuery("#bg");
                // Proporcion horizontal/vertical. En este caso la imagen es cuadrada
                ratio = 1;
                if (screenWidth/screenHeight > ratio) {
                    $(bg).height("auto");
                    $(bg).width("100%");
                } else {
                    $(bg).width("auto");
                    $(bg).height("100%");
                }
                // Si a la imagen le sobra anchura, la centramos a mano
                if ($(bg).width() > 0) {
                    $(bg).css('left', (screenWidth - $(bg).width()) / 2);
                }
            }
            $(document).ready(function() {
                // Actualizamos el fondo al cargar la pagina
                updateBackground();
                $(window).bind("resize", function() {
                    // Y tambien cada vez que se redimensione el navegador
                    updateBackground();
                });
            });
        </script>
        <!--scripts twitter        -->
        <!--        <script type="text/javascript" src="js/twitter/jQuery.js"></script>-->
        <script type="text/javascript" src="../js/twitter/jquery.jQTwitter.js"></script>
        <!--scripts cambio        -->
        <script type="text/javascript" src="../js/pag/jquery.jQTwitter.js"></script>
    </head>
    <body>

        <!--            imagen de fondo    
        -->        <img id="bg" src="../images/fondoPrincipal.png" alt="Fondo"/>


        <div class="meny">
            <h2>Vis&iacute;tanos</h2>
            <ul>
                <li><a href="http://lab.hakim.se/avgrund/">Inicio</a></li>
                <li><a href="http://lab.hakim.se/radar/">Misi&oacute;n</a></li>
                <li><a href="http://lab.hakim.se/radar/">Visi&oacute;n</a></li>
                <li><a href="http://lab.hakim.se/forkit-js/">Servicios</a></li>
                <li><a href="http://lab.hakim.se/scroll-effects/">Blog</a></li>

            </ul>
        </div>



        <div class="meny-arrow"></div>


        <div class="contents">
            <div id="wrapper">

                <header>
                    <figure><img src="../images/Logo-Horizontal.png"></figure>
                    <nav id="menu">
                        <ul id="sombra">
                            <li><a href="../index.php">Inicio</a></li>
                            <li><a href="portafolio.html">Portafolio</a></li>
                            <li><a href="#">Clientes</a></li>
                            <li><a href="servicios.html">Servicios</a></li>
                            <li><a href="#">Cont&aacute;ctenos</a></li>
                        </ul>
                    </nav>
                </header>
                <section id="contenedor">
                    <div id="content">
                        <h4>Servicios</h4>
                        <ul>
                            <li><a href="#">Lorem ipsum dolor sit amet</a></li>
                            <li><a href="#">Consectetur adipisicing elit, sed do eiusmod</a></li>
                            <li><a href="#">Duis aute irure dolor</a></li>
                            <li><a href="#">Excepteur sint occaecat cupidatat</a></li>
                        </ul>
                    </div>
                </section>

                <footer>
                    <!--          son los wigets de redes sociales y eso  -->
                    <div>
                        <section id="acerca">
                            <header>
                                <h3>Post recientes</h3>
                            </header>
                            <div id="texto">
                                <p>Somos una empresa dedicada a proveer servicios de seguridad .....</p>
                            </div>
                        </section>
                        <section id="otrosBlogs">
                            <header>
                                <h3>Twitter</h3>
                            </header>
                            <div id="texto">

                                <ul id="tweets">
                                </ul>
                            </div>
                        </section>
                        <section id="popular">
                            <header>
                                <h3>Facebook</h3>
                            </header>
                            <div id="texto">
                                <ul>
                                    <li><a href="#">Lorem ipsum dolor sit amet</a></li>
                                    <li><a href="#">Consectetur adipisicing elit, sed do eiusmod</a></li>
                                    <li><a href="#">Duis aute irure dolor</a></li>
                                    <li><a href="#">Excepteur sint occaecat cupidatat</a></li>
                                </ul>
                            </div>
                        </section>

                    </div>

                    <div id="autores">
                        <small>
                            Copyright &copy; 2012<br/>
                            Design & Development CIDsecure, Loja-Ecuador
                        </small>
                        <ul id="icons">
                            <li><a href="#" class="normaltip" title="Facebook"><img src="images/icon1.jpg" alt=""></a></li>
                            <li><a href="#" class="normaltip" title="Twitter"><img src="images/icon2.jpg" alt=""></a></li>
                            <li><a href="#" class="normaltip" title="Picasa"><img src="images/icon3.jpg" alt=""></a></li>
                            <li><a href="#" class="normaltip" title="YouTube"><img src="images/icon4.jpg" alt=""></a></li>
                        </ul>
                    </div>

                </footer>
            </div>
        </div>

        <script src="../js/menu/meny.min.js"></script>
        <script>
            // Create an instance of Meny
            var meny = Meny.create({
                // The element that will be animated in from off screen
                menuElement: document.querySelector( '.meny' ),

                // The contents that gets pushed aside while Meny is active
                contentsElement: document.querySelector( '.contents' ),

                // [optional] The alignment of the menu (top/right/bottom/left)
                position: Meny.getQuery().p || 'left',

                // [optional] The height of the menu (when using top/bottom position)
                height: 300,

                // [optional] The width of the menu (when using left/right position)
                width: 260,

                // [optional] Distance from mouse (in pixels) when menu should open
                threshold: 40
            });

            // API Methods:
            // meny.open();
            // meny.close();
            // meny.isOpen();
			

            // Embed an iframe if a URL is passed in
            if( Meny.getQuery().u && Meny.getQuery().u.match( /^http/gi ) ) {
                var contents = document.querySelector( '.contents' );
                contents.style.padding = '0px';
                contents.innerHTML = '<div class="cover"></div><iframe src="'+ Meny.getQuery().u +'" style="width: 100%; height: 100%; border: 0; position: absolute;"></iframe>';
            }
        </script>

    </body>
</html>
